<template>
  <div>
    <el-card>
      <div>
        <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">
          <el-form-item label="角色名称">
            <el-input v-model="form.roleName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="mb-1" icon="el-icon-search" size="middle" @click="getList">
              查询
            </el-button>
            <el-button type="primary" class="mb-15" icon="el-icon-refresh" size="middle" @click="getList">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-row>
        <el-col :span="8">
          <el-table :data="tableData" border style="width: 100%;" height="calc(100vh - 170px)" ref="singleTable" highlight-current-row @current-change="handleCurrentChange">
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column prop="roleName" label="角色名称">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.status==='1'">正常</el-tag>
                <el-tag type="danger" v-else>禁用</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="16">
          <el-card class="box-card">
            <span>当前角色 {{selectRoleName}} 拥有如下菜单：</span>
            <el-row style="margin-top: 20px;">
              <div v-for="item in allocMenus" :key="item">
                <el-col :span="3"><el-tag type="success">{{ item.menuName }}</el-tag></el-col>
              </div>
            </el-row>
          </el-card>
          <el-table :data="permissionData" border style="width: 100%;" height="calc(100vh - 330px)" ref="multipleTable" highlight-current-row @select="handleSelect">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="permissionName" label="权限名称" width="150">
            </el-table-column>
            <el-table-column prop="menuCount" label="关联菜单">
              <template slot-scope="scope">
                {{ getMenuNames(scope.row) }}
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 25px;">
            <el-pagination @size-change="handlePSizeChange" @current-change="handleCurPageChange" :current-page="pparams.pageNo" :page-sizes="[10, 20, 50]" :page-size="pparams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="ptotal"></el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
        
<script>
import { getRoleList, getRolePermissionRelList, getRoleOwnerMenuList, setRolePermissionRel } from "@/api/role";
import { getPermissionPage } from "@/api/permission";
export default {
  components: {
    // PermissionInfoComp
  },
  data () {
    return {
      form: {
        roleName: '',
      },
      params: {
        pageNo: 1,
        pageSize: 1000,
      },
      // total: 0,
      tableData: [],
      item: undefined,
      pparams: {
        pageNo: 1,
        pageSize: 1000,
      },
      ptotal: 0,
      permissionData: [],
      defaultProps: {
        children: 'children',
        label: 'menuName'
      },
      selectRoleId: '',
      selectRoleName: '',
      allocMenus: [],
      rolePermissionList: []
    }
  },
  mounted () {
    this.selectRoleId = this.$route.query.roleId
    this.getRoleList()
    this.getPermissionPage()
    this.getRoleOwnerMenuList()
  },
  methods: {
    getRoleList () {
      const param = { ...this.params, ...this.form }
      getRoleList(param).then((res) => {
        if (res.status === 200) {
          const data = res.data
          const tmp = []
          let selectRole = null
          data.forEach(element => {
            if (element.id === this.selectRoleId) {
              selectRole = element
              this.selectRoleName = element.roleName
            } else {
              tmp.push(element)
            }
          });
          if (selectRole !== null) {
            this.tableData = [selectRole, ...tmp]
            this.$refs.singleTable.setCurrentRow(selectRole);
          } else {
            this.tableData = [...tmp]
          }
        } else {
          this.$message(res.message);
        }
      });
    },
    getPermissionPage () {
      const param = { ...this.pparams }
      getPermissionPage(param).then((res) => {
        if (res.status === 200) {
          this.permissionData = res.data.records;
          this.ptotal = res.data.total
          this.getRolePermissionRelList()
        } else {
          this.$message(res.message);
        }
      });
    },
    getMenuNames (row) {
      const menuNames = row.menuList.map(item => item.menuName)
      var names = menuNames.join("，")
      return names
    },
    getRoleOwnerMenuList () {
      const param = { roleId: this.selectRoleId }
      getRoleOwnerMenuList(param).then((res) => {
        if (res.status === 200) {
          this.allocMenus = res.data
        } else {
          this.$message(res.message);
        }
      });
    },
    getRolePermissionRelList () {
      const param = { roleId: this.selectRoleId }
      getRolePermissionRelList(param).then((res) => {
        if (res.status === 200) {
          this.rolePermissionList = res.data
        } else {
          this.$message(res.message);
        }
      });
    },
    handleCurrentChange (row) {
      if (this.selectRoleId !== row.id) {
        this.selectRoleId = row.id
        this.selectRoleName = row.roleName
        this.getPermissionPage()
        this.getRoleOwnerMenuList()
      }
    },
    handleSelect (selection, row) {
      const isExist = selection.find(item => item.id === row.id)
      const params = { ischeck: isExist !== undefined, roleId: this.selectRoleId, permissionList: [row] }
      setRolePermissionRel(params).then((res) => {
        if (res.status === 200) {
          this.rolePermissionList = res.data
          this.getPermissionPage()
        } else {
          this.$message(res.message);
        }
      });
    },
  },
  watch: {
    rolePermissionList (newValue, oldValue) {
      // 在这里可以执行更多的逻辑
      if (newValue.length > 0 || newValue !== undefined) {
        const that = this
        this.$refs.multipleTable.clearSelection();
        if (that.permissionData.length > 0) {
          setTimeout(function () {
            that.permissionData.forEach(item => {
              // 假设我们要默认选中id为2的行
              const rowToSelect = newValue.find(row =>
                row.permissionId === item.id
              );
              if (rowToSelect) {
                that.$refs.multipleTable.toggleRowSelection(item);
              }
            })
          }, 50);
        }
      }
    }
  },
}
</script>